<template>
    <div id="content">
      <globle-linear-border>
        <el-card class="searchBox">
          <el-form :inline="true">
            <el-form-item label="学年">
              <el-select v-model="pageQuery.otherParams.schoolYear" placeholder="选择学年搜索" clearable>
                <el-option v-for="item in schoolYearList" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="学期">
              <el-select v-model="pageQuery.otherParams.stage" placeholder="选择学期搜索" clearable> 
                <el-option label="第一学期" :value="1" />
                <el-option label="第二学期" :value="2" />
              </el-select>
            </el-form-item>
            <el-form-item label="课程代码">
              <el-input v-model="pageQuery.otherParams.courseCode" placeholder="输入课程代码搜索" clearable />
            </el-form-item>
            <el-form-item label="教学班">
              <el-input v-model="pageQuery.otherParams.teachClass" placeholder="输入课程名称搜索" clearable />
            </el-form-item>
            <el-form-item label="教师姓名">
              <el-input v-model="pageQuery.otherParams.tchName" placeholder="输入教师姓名搜索" clearable />
            </el-form-item>
            <!-- <el-form-item label="教师工号">
              <el-input v-model="pageQuery.otherParams.workId" placeholder="输入教师工号搜索" clearable />
            </el-form-item> -->
            <!-- <el-form-item label="学号">
              <el-input v-model="pageQuery.otherParams.studentId" placeholder="输入学生学号搜索" clearable />
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="pageQuery.otherParams.stuName" placeholder="输入学生姓名搜索" clearable />
            </el-form-item>
            <el-form-item label="学院">
              <el-input v-model="pageQuery.otherParams.college" placeholder="输入学生学院搜索" clearable />
            </el-form-item>
            <el-form-item label="专业">
              <el-input v-model="pageQuery.otherParams.major" placeholder="输入学生专业搜索" clearable />
            </el-form-item>
            <el-form-item label="班级">
              <el-input v-model="pageQuery.otherParams.stuClass" placeholder="输入学生班级搜索" clearable />
            </el-form-item> -->
            <el-form-item label="分数范围">
              <el-select v-model="scoreRange" placeholder="选择分数范围搜索" clearable>
                <el-option label="90分以上" value="90,100" />
                <el-option label="80 - 90分" value="80,89.99" />
                <el-option label="70 - 80分" value="70,79.99" />
                <el-option label="60 - 70分" value="60,69.99" />
                <el-option label="60分以下" value="0,59.99" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <section>
                <el-button type="success" @click.stop="onMoreCilck">高级筛选</el-button>
                <el-button type="primary" icon="Search" @click.stop="getPageInfo">搜 索</el-button>
                <el-button type="warning" icon="RefreshRight" @click.stop="reset">重 置</el-button>
                <!-- <el-button type="warning" icon="Upload" @click="onExpose">导出数据</el-button> -->
              </section>
            </el-form-item>
          </el-form>
        </el-card>
      </globle-linear-border>
      <!-- 表格 -->
      <globle-linear-border style="margin-top: 20px">
        <el-card class="mainBox">
          <span v-if="tableData.rows">
              <el-table :border="true" stripe ref="tableRef" :data="tableData.rows" cell-class-name="table-cell"
                header-cell-class-name="table-header-cell">
                <el-table-column  label="学年" >
                  <template #default="scope">{{ scope.row.schoolYear }}{{ scope.row.stage }}</template>
                </el-table-column>
                <el-table-column property="courseCode" label="课程代码" />
                <!-- <el-table-column property="courseName" label="课程名称" /> -->
                <el-table-column property="teachClass" label="教学班" />
                <el-table-column property="studentId" label="学号" show-overflow-tooltip />
                <el-table-column property="stuName" label="姓名" />
                <el-table-column label="年级">
                  <template #default="scope">{{ scope.row.grade + '级' }}</template>
                </el-table-column>
                <el-table-column property="college" label="学院" />
                <el-table-column property="major" label="专业" />
                <el-table-column property="stuClass" label="班级">
                  <template #default="scope">{{ scope.row.stuClass }}</template>
                </el-table-column>
                <el-table-column property="score" label="分数" >
                  <template #default="scope">
                    <span :style="scoreStyle(scope.row.score)">{{ scope.row.score ? scope.row.score : '待录入' }}</span>
                  </template>
                </el-table-column>
                <el-table-column property="workId" label="录入教师工号" >
                  <template #default="scope">{{ scope.row.workId ? scope.row.workId : '待录入' }}</template>
                </el-table-column>
                <el-table-column property="tchName" label="录入教师" >
                  <template #default="scope">{{ scope.row.tchName ? scope.row.tchName : '待录入' }}</template>
                </el-table-column>
                <el-table-column property="createTime" label="录入时间" width="180">
                  <template #default="scope">{{ scope.row.createTime ? scope.row.createTime : '待录入' }}</template>
                </el-table-column>
              </el-table>
            <el-pagination v-model:currentPage="pageQuery.pageParams.pageNum"
              v-model:page-size="pageQuery.pageParams.pageSize" :page-sizes="pageSizeOption" :background="true"
              :small="true" layout="total, sizes, prev, pager, next, jumper" :total="tableData.totalSize"
              @size-change="onSizeChange" @current-change="onCurrentChange" />
          </span>
        </el-card>
      </globle-linear-border>
      
      <more-params ref="moreParamsRef" @reload="reload"></more-params>
    </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch } from 'vue';
import { APIData, IScorePageParams, IPageRes } from '../../../type';
import { useAPI } from '../../../request/api';
import { ElTable } from 'element-plus';
import MoreParams from './MoreParams.vue';

const api = useAPI();
const scoreRange = ref('');
const moreParamsRef = ref();
const pageSizeOption = [5, 10, 15, 20];
const tableData = ref({} as IPageRes);
const tableRef = ref<InstanceType<typeof ElTable>>();
const schoolYearList = ref([] as { label:string; value:string }[]);
const pageQuery = reactive<IScorePageParams>({
  otherParams: {
    courseId: '',
    studentId: '',
    stuName: '',
    stuClass: '',
    major: '',
    college: '',
    grade: '',
    workId: '',
    score: '',
    courseCode: '',
    teachClass: '',
    tchName: '',
    scoreRange: [],
    schoolYear: '',
    stage: ''
  },
  pageParams: {
    pageNum: 1,
    pageSize: pageSizeOption[1],
    sortField: '',
    sortType: '',
  },
});

onMounted(() => {
  findAllCourseSchoolYear();
  getPageInfo();
})

watch(scoreRange,() => {
  pageQuery.otherParams.scoreRange = scoreRange.value.split(',').map((item: string) => Number(item))
})

const scoreStyle = computed(() => (score: any) => {
  if(score < 60) return 'color:red';
  if(score >= 90) return 'color:#67c23a';
})

const reset = () => {
  pageQuery.otherParams = {
    courseId: '',
    studentId: '',
    stuName: '',
    stuClass: '',
    major: '',
    college: '',
    grade: '',
    workId: '',
    score: '',
    courseCode: '',
    teachClass: '',
    tchName: '',
    scoreRange: [],
    schoolYear: '',
    stage: ''
  }
  pageQuery.pageParams = {
    pageNum: 1,
    pageSize: pageSizeOption[1],
    sortField: '',
    sortType: ''
  }
  getPageInfo();
}

//更多按钮
const onMoreCilck = () => {
  moreParamsRef.value.open();
  pageQuery.otherParams = {
    courseId: '',
    studentId: '',
    stuName: '',
    stuClass: '',
    major: '',
    college: '',
    grade: '',
    workId: '',
    score: '',
    courseCode: '',
    teachClass: '',
    tchName: '',
    scoreRange: [],
    schoolYear: '',
    stage: ''
  }
}

const reload = (data: any) => {
  tableData.value = data;
}

// //导出
// const onExpose = () => {
//   window.open(`${api.baseUrl}/teacher/fileExport/stuInfo?stage=${pageQuery.otherParams.stage}&workId=${store.userInfo.workId}`, '_self');
// };

//分页大小
const onSizeChange = (val: number) => {
  pageQuery.pageParams.pageSize = val;
  pageQuery.pageParams.pageNum = 1;
  getPageInfo();
};

//分页页码
const onCurrentChange = (val: number) => {
  pageQuery.pageParams.pageNum = val;
  getPageInfo();
};

const findAllCourseSchoolYear = async () => {
  const res: APIData = await api.course.findAllCourseSchoolYear();
  if (res.code == 200) {
    const originList = res.data;
    schoolYearList.value = originList.map((item: string) => {
      return { label: `${item}学年`, value: `${item}` }
    })
  }
};

const getPageInfo = async () => {
  const res: APIData = await api.score.findPage(pageQuery);
  if (res.code == 200) tableData.value = res.data;
};
</script>

<style lang="scss" scoped>
#content {
  height: 100%;
  padding: 14px 32px;

  .searchBox {
    &-item {
      margin-right: 10px;
    }

    :deep(.el-card__body) {
      display: flex;
      justify-content: space-between;
    }

    section {
      display: flex;
    }

    :deep(.el-input__wrapper) {
      width: 200px;
    }
  }

  .mainBox {
    :deep(.el-checkbox__inner) {
      background-color: var(--main-color);
      transition: background 0.3s ease;
    }

    :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
      background-color: var(--active-color);
      transition: background 0.3s ease;
    }

    .el-form-item {
      margin-bottom: 0;
    }

    :deep(.el-form-item__error) {
      position: absolute;
      right: 8px;
      top: 8px;
      left: auto;
    }
  }
}
</style>
